<template>
    <div class="spBody wap">
      <x-header v-if="!this.$fromApp(this)" class="whiteTheme fixedHead" :left-options="{backText: ''}">促销活动</x-header>
      <div class="main">
        <scroller class="scrollerBox" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
          <ul class=" flex-direction-column display-flex align-items-center justify-content-flex-center">
            <li class="listItem flex-direction-column display-flex align-items-center justify-content-flex-center"
                v-for="(item, index) in dataArr" :key="index" @click="goPage(item)">
              <span class="msgDateStyle">{{item.creTime}}</span>
              <div class="contentBox display-flex flex-direction-row justify-content-flex-justify">
                <div class="display-flex flex-direction-column">
                  <img :src="item.distributorForMessageVO.logo" alt="">
                </div>
                <div class="itemContent display-flex flex-direction-column justify-content-flex-justify">
                  <p class="title">{{item.distributorForMessageVO.name}}</p>
                  <p v-if="item.buyGoods" class="gitTitle">[{{item.buyGoods.brandName}}] {{item.buyGoods.name}} {{item.buyGoods.spec}}</p>

                  <!--搭赠-->
                  <div v-if="item.activityType==10" class="giftRule">
                    <div class="giftGoodsName display-flex flex-direction-row align-items-center justify-content-flex-center">
                      <span class="must"></span>
                      <span style="font-weight: bold">赠品:</span><span class="name">[{{item.fullGifActivityForMessageVO.giftGoods.brandName}}] {{item.fullGifActivityForMessageVO.giftGoods.name}}</span>
                    </div>
                    <div class=" display-flex flex-direction-row flex-wrap-wrap" style="text-indent: .3rem;">
                      <span v-for="(j,jIndex) in item.fullGifActivityForMessageVO.activityFullRuleVOList" :key="jIndex" style="color: #666666;font-size: 12px">满{{j.num}}件搭赠{{j.giftNum}}件</span>
                    </div>
                  </div>

                  <!--特价-->
                  <div v-if="item.activityType==1" class="specRule">
                    <div style="color: #FB6E52;margin-left: .3rem">
                      <span class="must"></span>
                      <span style="color: #FB6E52;font-weight: bold;font-size: 13px">特价:  </span>
                      <div style="display: inline;" v-for="(z,zIndex) in item.specialPriceActivityForMessageVOS.detailVOS" :key="zIndex">
                        <span v-if="z.unitName == '包'"><span style="color: #FB6E52">{{z.taxPrice}}元</span>/包 <span v-if="item.specialPriceActivityForMessageVOS.detailVOS.length>1">,</span></span>
                        <span v-if="z.unitName == '件'"><span style="color: #FB6E52">{{z.taxPrice}}元</span>/件</span>
                      </div>
                    </div>
                    <!--<div style="color: #FB6E52;margin-left: .3rem">-->
                      <!--<span class="must"></span>-->
                      <!--<span style="color: #FB6E52;font-weight: bold;font-size: 13px">优惠限购:  </span>-->
                      <!--<div style="display: inline;" v-for="(z,zIndex) in item.specialPriceActivityForMessageVOS.detailVOS" :key="zIndex">-->
                        <!--<span style="color: #FB6E52" v-if="z.unitName == '包'&&z.limitNum!=null">{{z.limitNum}}包 <span v-if="item.specialPriceActivityForMessageVOS.detailVOS.length>1">,</span></span>-->
                        <!--<span style="color: #FB6E52" v-if="z.unitName == '件'&&z.limitNum!=null">{{z.limitNum}}件</span>-->
                      <!--</div>-->
                    <!--</div>-->
                  </div>

                  <span class="duration display-flex flex-direction-column" v-if="item.activityType == 10">
                    <span>开始时间:{{item.fullGifActivityForMessageVO.beginTime}}</span>
                    <span>结束时间:{{item.fullGifActivityForMessageVO.endTime}}</span>
                  </span>

                  <span class="duration display-flex flex-direction-column" v-if="item.activityType == 1">
                    <span>开始时间:{{item.specialPriceActivityForMessageVOS.beginTime}}</span>
                    <span>结束时间:{{item.specialPriceActivityForMessageVOS.endTime}}</span>
                  </span>

                  <span class="duration display-flex flex-direction-column" v-if="item.activityType == 0">
                    <span>开始时间:{{item.redPacketActivityForMessageVO.beginDate}}</span>
                    <span>结束时间:{{item.redPacketActivityForMessageVO.endDate}}</span>
                  </span>
                </div>

                <!--红包-->
                <div v-if="item.activityType==0" class="redPacketCount display-flex flex-direction-column justify-content-flex-justify">
                  <div class="display-flex flex-direction-row align-items-center justify-content-flex-center align-items-baseline" style="margin-top: -5px">
                    <span style="color: #FB6E52;font-size: 14px;">￥</span>
                    <span style="color: #FB6E52;font-size: 30px;font-weight: bold;">{{item.redPacketActivityForMessageVO.value}}</span>
                  </div>
                  <p style="color: #666666;font-size: 11px;text-align: center">满{{item.redPacketActivityForMessageVO.orderAmount}}可用</p>
                </div>
              </div>
            </li>
          </ul>
        </scroller>
      </div>
    </div>
</template>

<script>
    export default {
        name: "salesPromotion",
      data(){
          return{
            pageNum:1,
            noData:false,
            dataArr:[]
          }
      },
      mounted(){
         this.getData(0);
      },
      methods:{
          getData(scrollType,done){
            this.$ajax.get('message/activity_message/list',(res)=>{
              console.log(res);
              if(res.code == '200'){
                this.$refs.my_scroller&&this.$refs.my_scroller.finishPullToRefresh();
                if(0==scrollType){
                  this.dataArr = res.data;
                }else{
                  if(res.data&&res.data!=''){
                    this.dataArr = this.dataArr.concat(res.data);
                  }else {
                    this.noData = true;
                  }
                }

                if(typeof(done) == "function"){
                  done();
                }
              }
            },{pageSize:10,pageNo:this.pageNum});
          },
        goPage(val){
            console.log(val);
          if(val.activityType==0){
            //红包  distributorForMessageVO
            if(this.$fromApp(this)){
              this.$callJava({url:this.$webUrl+"purchase/storePage?from=app&id="+val.distributorForMessageVO.id + '&zeroSaleState=' + val.distributorForMessageVO.zeroSaleFlag,title:''})
            }else{
              this.$router.push({path:'/purchase/storePage',query:{id:val.distributorForMessageVO.id,zeroSaleState:val.distributorForMessageVO.zeroSaleFlag,from:'app'}})
            }

          }else{
            //特价和搭赠
            if(this.$fromApp(this)){
              this.$callJava({url:this.$webUrl+"good/operate?from=app&goodId="+val.buyGoods.id,title:''})
              // this.$router.push({path:"/good/operate",query:{id:val.buyGoods.id,from:'app'}})
            }else{
              this.$router.push({path:"/good/operate",query:{goodId:val.buyGoods.id,from:'app'}})
            }
          }
        },
        refresh(){
            this.pageNum = 1;
            this.noData = false;
            this.getData(0);
        },
        infinite(done){
            if(!this.noData){
              this.pageNum++;
              this.getData(1,done)
            }else{
              this.$refs.my_scroller&&this.$refs.my_scroller.finishInfinite(true)
            }
        },
      }
    }
</script>

<style lang="less" type="text/less" scoped>
  ul>li{
    list-style: none;
  }
  .spBody{
    .scrollerBox{
      .listItem{
        padding-top: .5rem;
        .msgDateStyle{
          font-size: 12px;
          color: #999999;
          margin-bottom: .2rem;
        }
        .contentBox{
          width: 6.2rem;
          border-radius: 16px;
          background-color: #ffffff;
          padding: .28rem .35rem;
          img{
            width: 1.14rem;
            height: 1.14rem;
            border-radius: 0.08rem;
          }
          .itemContent{
            flex:1;
            margin-left: .16rem;
            min-height: 1.14rem;
            .title{
              font-size: 14px;
              color: #333333;
              font-weight: bold;
            }
            .duration{
              font-size: 12px;
              color: #666666;
            }
            .gitTitle{
              color: #333333;
              font-weight: 500;
              font-size: 14px;
            }
            .giftRule{
              width: 4.4rem;
              border-radius: .3rem;
              background-color: #FDF8F4;
              border: 1px solid #FFEAD9;
              margin: .05rem 0;
              .giftGoodsName{
                width: 4.2rem;
                color: #FB6E52;
                .must{
                  display: inline-block;
                  width: .05rem;
                  height: .15rem;
                  margin-bottom: .02rem;
                  margin-right: .1rem;
                  border-radius: .025rem;
                  background-color: #FC6E51;
                }
                .name{
                  width: 3rem;
                  font-size: 12px;
                  font-weight: normal;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                }
              }
            }
            .specRule{
              width: 4.4rem;
              border-radius: .3rem;
              background-color: #FDF8F4;
              border: 1px solid #FFEAD9;
              margin: .05rem 0;
              .must{
                display: inline-block;
                width: .05rem;
                height: .15rem;
                margin-bottom: .02rem;
                margin-right: .1rem;
                border-radius: .025rem;
                background-color: #FC6E51;
              }
            }
          }
          .redPacketCount{
            height: 1.14rem;
          }
        }
      }
    }
  }
</style>
